<template>
  <div>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="客户端详情" width="680px">
      <Description :data="record" @register="registerDescription" />
      <Divider type="vertical" />
      <div ref="tableRef">
        <BasicTable @register="registerTable">
          <template #checked="{ record }">
            <Switch disabled v-model:checked="record.checked" checked-children="启用" size="default" un-checked-children="禁用" />
          </template>
        </BasicTable>
      </div>
    </BasicDrawer>
    <!-- <LdpConnectDetail @register="registerExtLdpConnectDetail" /> -->
  </div>
</template>
<script lang="ts" setup>
  import { ref, useAttrs, unref } from "vue"
  import { BasicTable, useTable } from "/@/components/Table"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { detailSchema, extLdpColumns } from "./data"
  import { getById, listExtLdpConn } from "./api"
  import { Divider, Switch } from "ant-design-vue"
  import { Description, useDescription } from "/@/components/Description/index"
  // import LdpConnectDetail from "/@/views/extLdp/connect/LdpConnectDetail.vue"
  import { useDrawer } from "/@/components/Drawer"
  
  const emit = defineEmits(["register"])
  const attrs = useAttrs()
  const record = ref<any>({})
  // const [registerExtLdpConnectDetail, { openDrawer: openExtLdpConnectDetail }] = useDrawer()
  const [registerDescription] = useDescription({
    column: 2,
    bordered: false,
    schema: detailSchema,
    labelStyle: {
      marginLeft: "10px",
    },
  })

  const actionColumn: BasicColumn = {
    width: 60,
    title: "操作",
    dataIndex: "action",
    helpMessage: "由处理业务的主租户管理, 管理场景租户一般不做配置",
    fixed: "right",
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "详情",
        onClick: handleExtLdpDetail.bind(null, record),
      },
    ],
  }

  const [registerTable, { reload, setProps }] = useTable({
    title: "外部身份源",
    columns: extLdpColumns,
    api: listExtLdpConn,
    rowKey: "grantType",
    immediate: false,
    showIndexColumn: false,
    striped: true,
    useSearchForm: false,
    showTableSetting: false,
    clickToRowSelect: false,
    pagination: false,
    bordered: false,
    actionColumn,
    scroll: {
      y: 10000,
    },
  })
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    try {
      setDrawerProps({ confirmLoading: false, loading: true })
      record.value = await getById({ id: data.record.id })
      setProps({ searchInfo: { id: unref(record.value.id) } })

      reload()
    } finally {
      setDrawerProps({ confirmLoading: false, loading: false })
    }
  })

  const handleExtLdpDetail = (record) => {
    // window.open(`${PageEnum.CONFIG_CENTER}?configKey=${record.configKey}`)
    // openExtLdpConnectDetail(true, { id: record.id })
  }
</script>

<style scoped></style>
